<template>
	<view class="container ul-layout">
		<view class="container-top">
			<!-- 头像天气基本信息 -->
			<view class="ul-layout container-top-infos">
				<!-- 基本天气信息 -->
				<!-- 头像 -->
				<view class="ul-layout container-top-info">
					<u--image shape="circle" :showLoading="true" :src="info.avatar" width="92rpx"
						height="92rpx"></u--image>
				</view>
				<!-- 用户信息 -->
				<view class="ul-layout container-top-info">
					<text class="text-default"><span style="font-size: 25px;  font-weight: bolder;">{{info.username}}</span></text>
				</view>
			</view>
			<!-- 搜索框 -->
			<!-- <view class="lr-layout container-top-class">
				<view class="lr-layout class-text">
					<input v-model="roomInfo.roomNum"  class="input" type="text" placeholder="请输入房间号"/>
				</view>
				<view >
					<button style="background-color: #007aff;" @click="selectRoomInfo" class="text-white">查看</button>
				</view>
			</view> -->
			<!-- 拥有权限数量 -->
			<!-- <view class="example-body" style="margin-top: 20px;">
				<button type="primary" @click="showDrawer('showLeft')"><text class="word-btn-white">拥有的房间权限</text>
				</button>
				<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')" >
					<view class="close">
						<button @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭</text></button>
					</view>
					<view class="info-content" v-for="(item,index) in sysDept" :key="index"
						style="text-align: center;margin: 10px 0 10px 0; position: relative;left: 35%;top:0%;"
					>
						<text
							style="color: #fff;background-color: #007aff;width: 100px;padding:10px 0;display: block;border-radius: 6px;"
						>{{item.deptName}}
						</text>
					</view>
				</uni-drawer>
			</view> -->
			<!-- 房间跳转 -->
			<view class="example-body">
				<!-- <uni-combox :candidates="sysDept" placeholder="请选择您的房间号"
					v-model="roomInfo.roomNum"
					@change="selectRoomInfo"
					
				>
				</uni-combox> -->
				 <uni-data-select
				      v-model="roomInfo.roomNum"
				      :localdata="sysDept"
				      @change="selectRoomInfo"
					  :clear="false"
				    ></uni-data-select>
			</view>
			<!-- 温度仪表盘 -->
			<view class="container-top-dashboard">
				<view class="charts-box">
					<qiun-data-charts type="gauge" :opts="opts" :chartData="chartData" />
				</view>
			</view>
			<!-- 设置信息-->
			<view class="lr-layout container-top-setting">
				<view class="ul-layout setting-item">
					<view class="lr-layout">
						<text class="sanhenggang">&#xe6fb;</text>
						<text>当前湿度</text>
					</view>
					<text class="setting-item-text">{{deviceInfo.humidness}}%</text>
				</view>
				
				<u-line direction="col" length="80rpx"> </u-line>
				<view class="ul-layout setting-item">
					<view class="lr-layout autos">
						<text class="sanhenggang">&#xe630;</text>
						<text>自动</text>
					</view>
					<u-switch size="20" activeColor="#3929FE" v-model="isAuto" @change="autoChange"></u-switch>
				</view>
			</view>
		</view>
		<view class="ul-layout container-bottom">
		
			<!-- 设备开关 -->
			<view class="container-bottom-grad">
				
				<view class="ul-layout setting-switch" v-for="(item,index) in deviceInfo.electionFan" :key=index>
					<view class="lr-layout setting-switch-top">
						<text class="air">&#xe625;</text>
						<text>{{item.deviceName}}</text>
						<u-switch size="18" activeColor="#3929FE" v-model="item.deviceData"
							@change="changeSwitch(index,'electionFan')" />
					</view>
					<u-line></u-line>
					<view class="lr-layout setting-switch-bottom">
						<view @click="switchPeed(1)">
							<text :class="item.windpeed==1?'selecticon':'sanhenggang'">&#xe621;</text>
							<text>低速</text>
						</view>
						<view @click="switchPeed(2)">
							<text :class="item.windpeed==2?'selecticon':'sanhenggang'">&#xe623;</text>
							<text>中速</text>
						</view>
						<view @click="switchPeed(3)">
							<text :class="item.windpeed==3?'selecticon':'sanhenggang'">&#xe673;</text>
							<text>高速</text>
						</view>
					</view>
				</view>

			</view>
			<!-- 设备开关 -->
			<view class="container-bottom-grad">
				<view class="ul-layout setting-switch-air" v-for="(item,index) in deviceInfo.ledLight" :key="index">
					<view class="lr-layout setting-switch-top">
						<text class="air">&#xe65a;</text>
						<text>{{item.deviceName}}</text>
						<!-- @change="event=>airSwitch(event,item.deviceId);v-model="item.deviceData=='1'?true:false" " -->
						<u-switch size="18" activeColor="#3929FE" v-model="item.deviceData"  
							@change="changeSwitch(index,'ledLight')" />
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Solider from "@/components/u-slider.vue"
	import sd from "@/static/font/iconfont.css"
	import { selectRoomInfo,changeDeviceSwitch,selectDeptName } from '@/api/app/deviceInfo'
	export default {
		data() {
			return {
				//基本信息
				info: {
					username: this.$store.state.user.name,
					avatar: this.$store.state.user.avatar
				},
				showLeft: false,
				sysDept:[
				],
				roomInfo:{
					roomNum:null
				},
				colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'button',
				//温度滑块
				value: 16,
				isAuto: true,
				deviceInfo:{},
				chartData:{},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: "",
						fontSize: 32,
						color: "#000000",
						offsetY: 0
					},
					subtitle: {
						name: "当前温度",
						fontSize: 16,
						color: "#a4a4a4",
						offsetY: 0
					},
					extra: {
						gauge: {
							type: "progress",
							width: 20,
							labelColor: "#666666",
							startAngle: 0.75,
							endAngle: 0.25,
							startNumber: 0,
							endNumber: 100,
							labelFormat: "",
							splitLine: {
								fixRadius: -10,
								splitNumber: 10,
								width: 15,
								color: "#FFFFFF",
								childNumber: 5,
								childWidth: 12
							},
							pointer: {
								width: 24,
								color: "#7cb5ec"
							}
						}
					},

				},
			}
		},
		onLoad() {
			// this.roomInfo.roomNum = 315;
			// this.selectRoomInfo();
			this.selectDeptNameList();
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			confirm() {},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			selectRoomInfo(){
				if (this.roomInfo.roomNum === null||this.roomInfo.roomNum === 0) {
					this.$modal.msgError("请输入您的房间号")
				} 
				this.$modal.loading("查询中，请耐心等待...")
				this.change();
			},
			//开关
			change(){
				selectRoomInfo(this.roomInfo.roomNum).then(res => {
					this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
					if (this.captchaEnabled) {
					  this.$modal.closeLoading()
					  if(res.code == 200){
						  this.deviceInfo = res.data
						  // console.log(this.deviceInfo)
						  for(let i =0 ;i<this.deviceInfo.ledLight.length;i++){
							this.deviceInfo.ledLight[i].deviceData = this.deviceInfo.ledLight[i].deviceData == "1" ? true:false
						  }
						  for(let i =0 ;i<this.deviceInfo.electionFan.length;i++){
							this.deviceInfo.electionFan[i].deviceData = this.deviceInfo.electionFan[i].deviceData == "1" ? true:false
						  }
						  this.opts.title.name = parseInt(this.deviceInfo.temperature)+"℃";
					  }else{
						this.$modal.msgError(res.msg);
					  }

					}
				})
			},
			selectDeptNameList(){
				selectDeptName().then(res =>  {
					this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
					if (this.captchaEnabled) {
					  if(res.code == 200){
						  this.sysDept = res.data;
						  // console.log(this.sysDept)
					  }else{
						this.$modal.msgError(res.msg);
					  }
					}
				})
			},
			//设备开关
			changeSwitch(index,type) {
				this.$modal.loading("正在执行，请稍等...");
				let data = "";
				let id = "";
				if(type == "ledLight"){
					data = this.deviceInfo.ledLight[index].deviceData;
					id = this.deviceInfo.ledLight[index].deviceId;
				}else if(type == "electionFan"){
					data = this.deviceInfo.electionFan[index].deviceData;
					id = this.deviceInfo.electionFan[index].deviceId;
				}
				changeDeviceSwitch(id,data==true?"1":"0").then(res => {
				  this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
				  if (this.captchaEnabled) {
					  this.$modal.closeLoading();
					   if(res.msg == "ok"){
						this.$modal.msgSuccess("执行成功!");
					  }else{
						 this.$modal.msgError(res.msg);
					  }
					this.change();
				  }
				}) 
			 },
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: [{
							"value": 0.2,
							"color": "#1890ff"
						}, {
							"value": 0.8,
							"color": "#2fc25b"
						}, {
							"value": 1,
							"color": "#f04864"
						}],
						series: [{

							name: "完成率",
							data: 1
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			//设定自动
			autoChange(e) {

			}
		},
		components: {
			// Solider
		},
		onNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.$refs.showLeft.close()
				this.$refs.showRight.close()
				return true
			}
		}
	}
</script>

<style lang="less">
	@font-family1: "思源黑体";
	@font-family2: "HarmonyOS Sans SC";
	@font-family3: "MiSans";

	//整体布局
	.container {
		margin: 0;
		padding: 38rpx;
		background: linear-gradient(180deg, rgba(184, 202, 245, 1) 0%, rgba(255, 255, 255, 0) 100%);

		.container-top {
			width: 100%;

			//头像 天气基本信息
			.container-top-infos {
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;

				//头像
				.container-top-avatar {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin: 48rpx;

					text {
						margin-top: 24rpx;
					}
				}

				//基本天气信息
				.container-top-info {
					margin: 48rpx;
					align-items: center;
				}
			}

			//分类菜单
			.container-top-class {
				justify-content: space-between;
				align-items: center;
				background-color: aliceblue;
				border-radius: 4px;
				border: 1px #3196D7 ;

				//分类文字
				.class-text {
					font-size: 48rpx;
					font-weight: 500;
					margin-left: 20px;
					text {
						margin-right: 52rpx;
					}
				}

				//选中
				.class-text-select {
					color: rgba(94, 88, 88, 1);
				}

				// 未选中
				.class-text-default {
					color: rgba(176, 171, 171, 1);
				}
			}

			//仪表盘
			.container-top-dashboard {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 72rpx;
			}

			//设置参数显示
			.container-top-setting {
				justify-content: space-between;
				align-items: center;

				//设置
				.setting-item {
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.65);
					font-weight: 400;

					view {
						align-items: center;
					}

					.setting-item-text {
						font-size: 40rpx;
						color: rgba(0, 0, 0, 1);
						font-weight: 500;
					}
				}
			}
		}

		.container-bottom {
			width: 100%;
			margin-top: 40rpx;

			.container-bottom-item {
				justify-content: space-between;
				width: 100%;
				margin-bottom: 40rpx;

				.setting-switch {
					background-color: rgba(237, 240, 247, 1);
					border-radius: 36rpx;
					padding: 38rpx;
					margin-right: 20rpx;

					.setting-switch-top {
						justify-content: center;
						align-items: center;

						text {
							padding-right: 12rpx;
							font-size: 32rpx;
							white-space: nowrap;
							font-weight: 500;
							color: rgba(56, 54, 54, 1);
						}

					}

					.setting-switch-bottom {
						width: 100%;
						justify-content: space-between; // color: red;
						white-space: nowrap;
						margin-top: 44rpx;

						view {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							text {
								font-size: 28rpx;
								font-weight: 400;
								color: rgba(105, 101, 101, 1);
							}
						}

					}
				}
			}

			//空调卡片
			.container-bottom-grad {
				display: grid;
				grid-template-columns: 50% 50%;
				// justify-content: space-between;
				width: 100%;
				margin-bottom: 40rpx;

				.setting-switch {
					background-color: rgba(237, 240, 247, 1);
					border-radius: 36rpx;
					padding: 38rpx;
					// margin-right: 20rpx;
					margin: 0 20rpx 20rpx 20rpx;

					.setting-switch-top {
						justify-content: center;
						align-items: center;
						margin-bottom: 18rpx;

						text {
							padding-right: 12rpx;
							font-size: 32rpx;
							white-space: nowrap;
							font-weight: 500;
							color: rgba(56, 54, 54, 1);
						}

					}

					.setting-switch-bottom {
						width: 100%;
						justify-content: space-between; // color: red;
						white-space: nowrap;
						margin-top: 44rpx;

						view {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							text {
								font-size: 28rpx;
								font-weight: 400;
								color: rgba(105, 101, 101, 1);
							}
						}

					}
				}

				.setting-switch-air {
					background-color: rgba(237, 240, 247, 1);
					border-radius: 36rpx;
					padding: 28rpx;
					// margin-right: 20rpx;
					margin: 0 20rpx 20rpx 20rpx;

					.setting-switch-top {
						justify-content: center;
						align-items: center;
						margin-bottom: 18rpx;

						text {
							padding-right: 12rpx;
							font-size: 32rpx;
							white-space: nowrap;
							font-weight: 500;
							color: rgba(56, 54, 54, 1);
						}

					}

					.setting-switch-bottom {
						width: 100%;
						justify-content: space-between; // color: red;
						white-space: nowrap;
						margin-top: 44rpx;

						view {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							text {
								font-size: 28rpx;
								font-weight: 400;
								color: rgba(105, 101, 101, 1);
							}
						}

					}
				}
			}
		}
	}

	//上下布局
	.ul-layout {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	//左右布局
	.lr-layout {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		
	}

	//默认字体初始化
	text {
		font-family: '黑体';
		margin: 0;
		padding: 0;
	}

	.text-default {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(13, 18, 63, 1);
	}

	.text-36 {
		font-size: 72rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
	}

	//字体文件
	@font-face {
		font-family: iconfont;
		src: url('~@/static/font/iconfont.ttf');
	}

	//字体文件
	.sanhenggang {
		font-family: iconfont !important;
		color: #777777 !important;
		font-size: 56rpx !important;
	}

	.shuhenggang {
		font-family: iconfont !important;
		color: #777777 !important;
		font-size: 6, 10rpx !important;
	}

	.selecticon {
		font-family: iconfont !important;
		color: #3196D7 !important;
		font-size: 56rpx !important;
	}

	.air {
		font-family: iconfont !important;
		color: #333238 !important;
		font-size: 34rpx !important;
	}

	.badge-button {
		padding: 4rpx 6rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(74, 74, 255, 1);
		font-size: 13.06rpx;
		height: 80rpx;
		width: 80rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>